<script setup lang="ts">

import Child1 from "@/vueTest/c/06_$refs-$parent/Child1.vue";
import Child2 from "@/vueTest/c/06_$refs-$parent/Child2.vue";
import {ref} from "vue";
const house = ref(4)
const c1 = ref()
const c2 = ref()

defineExpose({house})

function changeToy() {
  console.log(c1.value)
  c1.value.toy = '小猪佩奇'
}

function changeComputer() {
  c2.value.computer = '华为'
}

function getAllChild(refs:any) {
  console.log('children', refs)
  for (let key in refs) {
    refs[key].book += 3
  }
}
</script>

<template>
<h3>父组件</h3>
  <h4>房产{{house}}</h4>
  <button @click="changeToy"> 修改child1的玩具</button>
  <button @click="changeComputer"> 修改child2的电脑</button>
  <button @click="getAllChild($refs)">获取所有子组件实例对象</button>
  <hr>
<!--  给child1组件打标识c1-->
  <Child1 ref="c1"/>
  <Child2 ref="c2"/>
</template>

<style scoped>

</style>